import React,{useEffect} from "react";
import PubSub from "pubsub-js";
import {CapsuleTabs} from "antd-mobile";
export const typeOfFood = ['蔬菜','水果','海鲜水产','米面粮油','休闲零食','酒水','肉类']
export default function Nav(){

    useEffect(() => {
        PubSub.publish('typeOfFood',typeOfFood[0])
    }, [])


     async function handlerOnchange(value:string){
        // const res = await axios.get(`/api/vegetableClassification?type=${value}&limit=0`)
         PubSub.publish('typeOfFood',value)
    }


    return (
        <CapsuleTabs
            onChange={handlerOnchange}
        >
            {
                typeOfFood.map((item) => {
                    return (
                    <CapsuleTabs.Tab
                        title={
                            <li>{item}</li>
                        }

                        // CapsuleTabs 的 change 事件可以接受到 CapsuleTabs.Tab 的 key 值
                        //所以将 key 设为 item 可以直接获取当前项
                        key={item}

                    >
                    {/*  这里的内容会被写入到下一行  */}
                    </CapsuleTabs.Tab>
                    )
                })
            }
        </CapsuleTabs>
    )
}
